<script lang="ts" setup>
import { ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const num = ref(10)

const timerId1 = setInterval(() => {
  num.value--
}, 1000)

const timerId2 = setTimeout(() => {
  router.back()
}, 10000)

onBeforeUnmount(() => {
  clearInterval(timerId1)
  clearTimeout(timerId2)
})
</script>

<template>
  <div class="not-found">
    <el-col :sm="12" :lg="6">
      <el-result
        icon="error"
        title="404"
        :sub-title="`页面不存在, ${num}秒后自动返回...`"
      >
        <template #extra>
          <el-button type="primary" @click="router.back()">返回</el-button>
        </template>
      </el-result>
    </el-col>
  </div>
</template>

<style lang="scss" scoped>
.not-found {
  padding-top: 25vh;
  background: #efefef;
  height: 100vh;

  .el-col {
    margin: 0 auto;
  }
}
</style>
